import React, { useState } from 'react'
import dayjs from 'dayjs'
import {
    Button,
    DatePicker,
    Form,
    Input,
    Radio,
    Select,
} from 'antd';
const { TextArea } = Input;
export default function FormInput() {
    const [componentSize, setComponentSize] = useState('default');
    const [readioValue,setReadioVideo]=useState('1')
    const [textAreaValue,setTextAreaValue]=useState('')
    const [inputValue,setInputValue]=useState('')
    const [selectValue,setSelectValue]=useState('')
    const [dataPickerInput,setDataPickerInput]=useState('')
    const onFormLayoutChange = ({ size }) => {
        setComponentSize(size);
    };
    // 选号数据
    const onRadioChange=(e)=>{
        setReadioVideo(e.target.value)
    }
    //文本域
    const onChangeTextArea=(e)=>{
        setTextAreaValue(e.target.value)
    }
    // 选择框
    const onChangeSelect=(e)=>{
        setSelectValue(e)
    }
    // 输入框
    const onChangeInput=(e)=>{
        setInputValue(e.target.value)
    }
    const onChangeDataPickerInput=(e)=>{
        setDataPickerInput(e)
    }
    // 提交
    const onSubmitClick=()=>{
        console.log(readioValue,textAreaValue,inputValue,selectValue,dataPickerInput)
    }
    return (
        <div className='formInput'>
            <Form
                labelCol={{
                    span: 4,
                }}
                wrapperCol={{
                    span: 14,
                }}
                layout="horizontal"
                initialValues={{
                    size: componentSize,
                }}
                onValuesChange={onFormLayoutChange}
                size={componentSize}
                style={{
                    maxWidth: 600,
                }}
            >
                <Form.Item label="" name="size">
                    <Radio.Group value={readioValue} onChange={onRadioChange}>
                        <Radio.Button value="1">小号</Radio.Button>
                        <Radio.Button value="2">中号</Radio.Button>
                        <Radio.Button value="3">大号</Radio.Button>
                    </Radio.Group>
                </Form.Item>
                <Form.Item label="">
                    <Input value={inputValue} onChange={onChangeInput}/>
                </Form.Item>
                <Form.Item label="">
                    <TextArea value={textAreaValue} allowClear onChange={onChangeTextArea} />
                </Form.Item>
                <Form.Item label="">
                    <Select value={selectValue} onChange={onChangeSelect}>
                        <Select.Option value="男">男</Select.Option>
                        <Select.Option value="女">女</Select.Option>
                    </Select>
                </Form.Item>
                <Form.Item label="">
                    <DatePicker format={'YYYY/MM/DD'} value={dataPickerInput} onChange={onChangeDataPickerInput} />
                </Form.Item>
                <Form.Item>
                    <Button type='primary' htmlType="submit" onClick={onSubmitClick}>Button</Button>
                </Form.Item>
            </Form>
        </div>
    )
}